<template>
	<div class="questions">
		
		<div class="questions-div">
			
			<div class="questions-body">
				<div class="tr1"  v-for="(item,index) in body.rule" >
					<div class="tr-div"
						:style="{'background':twoitem.ticolor}"
						v-for="(twoitem,twoindex) in item"
						:class="{
							'tr-right' : (index==0 || index==1  || index==3  || index==4  || index==6 ||index == 7 ||index == 8) && (twoindex ==2 || twoindex ==5),
							'tr-below' : (index==2 || index==5) && (twoindex !=2 || twoindex !=5),
							'tr-rightbelow' : (index==2 || index==5) && (twoindex ==2 || twoindex == 5),				
						}"
					>
						<input type="number"  disabled  v-if="twoitem.type==0"  v-model="twoitem.value" />
							<input type="number"
							 :class="index == xindex && twoindex == xindex1  ? 'bagcolor': ''"
							 class="pitchon " @click="userinputClick(index,twoindex)"  disabled  v-if="twoitem.type==1 && bijishow == 0"  v-model="twoitem.uservalue" />
						<view class="bijique" v-if="twoitem.type==1 && bijishow == 1" @click="userinputClick(index,twoindex)"  :class="index == xindex && twoindex == xindex1  ? 'bagcolor': ''">
							<view v-for="(item,index) in twoitem.biji">{{item}}</view>	
						</view>	
					</div>
					
				</div>
				<div class="dingwei shang1one" v-if="body.shang1one > 0">
					<input  type="number" disabled v-model="body.shang1one"/>
				</div>
				<div class="dingwei shang2two" v-if="body.shang2two > 0">
					<input  type="number" disabled v-model="body.shang2two"/>
				</div>
				
				<div class="dingwei shang4two" v-if="body.shang4two > 0">
					<input  type="number" disabled v-model="body.shang4two"/>
				</div>
				
				<div class="dingwei shang5one" v-if="body.shang5one > 0">
					<input  type="number" disabled v-model="body.shang5one"/>
				</div>
				<div class="dingwei shang7one" v-if="body.shang7one > 0">
					<input  type="number" disabled  v-model="body.shang7one"/>
				</div>
				
				<div class="dingwei shang8two" v-if="body.shang8two > 0">
					<input  type="number" disabled v-model="body.shang8two"/>
				</div>
				
				<div class="dingwei dingweione" v-if="body.dingweione > 0">
					<input  type="number" disabled   v-model="body.dingweione"/>
				</div>
				<div class="dingwei dingweitwo" v-if="body.dingweitwo > 0">
					<input  type="number" disabled  v-model="body.dingweitwo"/>
				</div>
				<div class="dingwei dingweithree" v-if="body.dingweithree > 0">
					<input  type="number" disabled  v-model="body.dingweithree"/>
				</div>
				<div class="dingwei dingweifour" v-if="body.dingweifour > 0">
					<input  type="number" disabled  v-model="body.dingweifour"/>
				</div>
			</div>
		</div>
		
		
	
		
	</div>
</template>

					
<script>
	export default {
		props: ['body','bijishow'],
		watch:{
			body(e){
				this.body  = e;
			}
		},
		data() {
			return {
				type : 0, 
				xindex : null,
				xindex1 : null
				
			}
		},
		created() {
			console.log(this.body);
		},
		methods:{
			userinputClick(index,index1){
				this.xindex = index;
				this.xindex1 = index1;
				this.$emit('userinputChange',{'index':index,'index1':index1});
			},
			
		}
	}
</script>

<style >
	
	@import url("@/common/css/questions.css");
	.questions {
		display: flex;	
		
	}
	.questions-div {
		width: 738rpx;
		height: 780rpx;
		margin: auto;
	}
	.questions-body {
		width: 738rpx;
		height: 738rpx;
		border: 2rpx solid #000;
		box-shadow: inset 2rpx 2rpx 0 #e3e4e5;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.tr1 {
		display: flex;
		flex: 1;
	}
	.bagcolor {
		background-color: #edff38;
		width: 98% !important;
		height: 98% !important;
	}
	.dingwei {
		width: 70rpx;
		height: 70rpx;
		border: 2rpx solid #409eff;
		font-size: 36rpx;
	}
	.dingweione {
		position: absolute;
		bottom: 63%;
		z-index: 9;
		margin-left: 28.5%;
		text-align: center;
		border-radius: 50%;
		
		color: #409eff;
	}
	.dingwei > input {
		margin: auto;
		text-align: center;
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #409eff;
		border: none;
	}
	.dingweitwo {
		position: absolute;
		bottom: 62.6%;
		z-index: 9;
		margin-left: 61.9%;
		text-align: center;
		border-radius: 50%;
		color: #409eff;
	}
	.dingweithree {
		position: absolute;
		bottom: 30%;
		z-index: 9;
		margin-left: 28.5%;
		text-align: center;
		border-radius: 50%;
		color: #409eff;
	}
	.dingweifour {
		position: absolute;
		bottom: 30%;
		z-index: 9;
		margin-left: 61.9%;
	
		
		text-align: center;
		border-radius: 50%;
		color: #409eff;
	}
	.shang1one {
		position: absolute;
		bottom: 83%;
		z-index: 9;
		margin-left: 28.5%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
	.shang2two {
		position: absolute;
		bottom: 72.6%;
		z-index: 9;
		margin-left: 61.9%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
	.shang4two {
		position: absolute;
		bottom: 50.6%;
		z-index: 9;
		margin-left: 61.9%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
	.shang5one {
		position: absolute;
		bottom: 39%;
		z-index: 9;
		margin-left: 28.5%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
	.shang7one {
		position: absolute;
		bottom: 17%;
		z-index: 9;
		margin-left: 28.5%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
	.shang8two {
		position: absolute;
		bottom: 5.6%;
		z-index: 9;
		margin-left: 61.9%;
		border: 1px solid #409eff;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		font-size: 28px;
		color: #409eff;
	}
</style>